<template>
    <div>
        <div>
            <div style="padding: 0rem 1.5rem;font-size: 1rem; line-height: 1.93rem;text-align: left;">
                <el-date-picker style="cursor: pointer;" v-model="selectDate" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
                <span class="date">{{today}}</span>
                <!-- <span  id="isvaildReportLabel" style="font-size:18px;margin-left:30px">{{isvaildReportLabel}}</span> -->
            </div>
           <div id="main-container" class="alldivWeek">
                <div class="panel" id="chart-grid" style="margin-top:20px; display: flex; justify-content: space-between; padding-right: 1.5rem; padding-left: 1.5rem;">
                    <div style="width:47rem">
                        <div class="card" id="nighttime" style="grid-row: span 2;">
                            <h2>夜间睡觉</h2>
                            <div id="sleep-time">
                                <h5 style="color: #ED7762">常规上床时间 <span id="bed">{{bed}}</span> pm</h5>
                                <h5 style="color: #95B952">常规起床时间<span id="getup">{{getup}}</span> am</h5>
                            </div>
                            <div class="chart" id="SleepChart" style="float: left; border-color: #F2F2F2"></div>
                            <div class="stats">
                                <div class="stat-legend">
                                    <h3 style="color: #774B97;">● 夜间在床</h3>
                                    <h5>平均每天</h5>
                                    <h4><span class="highlight" id="sleepinbed">{{sleepinbed}}</span>小时 <span class="highlight" id="sleepinbed1">{{sleepinbed1}}</span>分钟</h4>
                                </div>
                                <div class="stat-legend">
                                    <h3 style="color: #8CAD4E;">●  起夜次数</h3>
                                    <h5>平均每天</h5>
                                    <h4>
                                        <span class="highlight" id="NightUpTimes">{{NightUpTimes}}</span>次
                                    </h4>
                                </div>
                            </div>
                        </div>
                        <div class="card2" id="ninghtsleep1" style="">
                            <h2 class="uppercase">夜间心率</h2>
                            <div class="chart2" id="syxlweekChart" style="float: left;  border-color: #F2F2F2"></div>
                            <div class="stats">
                                <div class="stat">
                                    <h3 style="color:#6b4fdb">● 夜间心率</h3>
                                    <h4>平均每天<span class="highlight" id="syxinlvWeekyavg1">{{syxinlvWeekyavg1}}</span>次</h4>
                                </div>
                            </div>
                        </div>
                        <div class="card2" id="ninghtsleep1" style="">
                            <h2 class="uppercase">夜间呼吸率</h2>
                            <div class="chart2" id="syhxlweekChart" style="float: left; border-color: #F2F2F2"></div>
                            <div class="stats">
                                <div class="stat">
                                    <h3 style="color: #4fc8db">● 夜间呼吸率</h3>
                                    <h4>平均每天<span class="highlight" id="syhuxilvWeekyavg">{{syhuxilvWeekyavg}}</span>次</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="width:47rem">
                        <div class="card" id="ninghtsleep1" style="">
                            <h2 class="uppercase">睡眠评分</h2>
                            <div style="display: grid;grid-template-columns: 1fr 1fr;margin-top: 10pt;visibility:hidden">
                                <h5 style="color: #ED7762">常规上床时间 <span id="bed">{{bed}}</span> pm</h5>
                                <h5 style="color: #95B952">常规起床时间<span id="getup">{{getup}}</span> am</h5>
                            </div>
                            <div class="chart" id="ninghtsleepChart" style="float: left;border-color: #F2F2F2"></div>
                            <div class="stats">
                                <div class="stat">
                                    <h3 style="color:#6B8FD4">● 睡眠</h3>
                                    <h4><span class="highlight" id="weeksleepavg">{{weeksleepavg}}</span><span class="highlight" id="xiuximint1"></span>分 平均每天</h4>
                                </div>


                            </div>

                        </div>
                        <div class="card2" id="ninghtsleep1">
                            <h2 class="uppercase">次数统计</h2>
                            <div class="chart2" id="countsChart" style="float: left;  border-color: #F2F2F2"></div>
                            <div class="stats">
                                <div class="stat" style="visibility:hidden">
                                    <h3 style="color:#C33A36">● 外出次数</h3>
                                    <h4><span class="highlight" id="wwaichucount">{{wwaichucount}}</span>次 <span class="highlight" id="waichucount1"></span>平均每天</h4>
                                </div>
                                <div class="stat">
                                    <h3 style="color:#2F4554">● 卫生间次数</h3>
                                    <h4><span class="highlight" id="wweishengjiancount">{{wweishengjiancount}}</span>次 <span class="highlight" id="wweishengjiancount1"></span>平均每天</h4>
                                </div>
                                <div class="stat">
                                    <h3 style="color:#5E9EA6">● 夜间离床次数</h3>
                                    <h4><span class="highlight" id="yjlccount">{{yjlccount}}</span>次 <span class="highlight" id="wfangwencount1"></span>平均每天</h4>
                                </div>
                                <div class="stat" style="visibility:hidden">
                                    <h3 style="color:#5E9EA6">● 访问次数</h3>
                                    <h4><span class="highlight" id="wfangwencount">{{wfangwencount}}</span>次 <span class="highlight" id="wfangwencount1"></span>平均每天</h4>
                                </div>

                            </div>
                        </div>
                    
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

  <script>
  import { mapState } from "vuex";
  import { GetWeekReport } from "../../api/index";
  export default {
    name: "weekReport",
    components: {
    },
    computed: mapState({
      currentUserId: (state) => state.currentUserId, //当前的用户id
      userInfoDetails: (state) => state.userInfoDetails,//用户信息
    }),
    data() {
      return {
        selectDate: '',
        today:'',
        bed:'',
        getup:'',
        sleepinbed:0,
        sleepinbed1:0,
        NightUpTimes:0,
        wwaichucount:'',
        wweishengjiancount:'',
        wfangwencount:'',
        weeksleepavg:'',
        syxinlvWeekyavg1:'',
        syhuxilvWeekyavg:'',
        yjlccount:''
      };
    },
    created(){
      this.selectDate =  new Date().Format('yyyy-MM-dd')
      this.today = new Date(new Date().getTime() - 24 * 60 * 60 * 1000 * 7).Format('yyyy年MM月dd日')+'~'+new Date(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy年MM月dd日')
    },
    watch:{
       selectDate(val){
           this.today = new Date(new Date(val).getTime() - 24 * 60 * 60 * 1000 * 7).Format('yyyy年MM月dd日')+'~'+new Date(new Date(val).getTime() - 24 * 60 * 60 * 1000).Format('yyyy年MM月dd日')
           this.weekreport()
       }
    },
    methods: {
        //日报
        async weekreport() {
            var AllTime2 = [],This = this
            var data= {
                    'userid':This.currentUserId,
                    'date':new Date(new Date(This.selectDate).getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')//This.selectDate
            }
            await GetWeekReport(JSON.stringify(data)).then((data) => {
                var x = [], y = [];
                data = data.data
                // var pingjunzhi = 0;
                if (data.statistics_Step != null) {
                    for (var i = 0; i < data.statistics_Step.array_Step.length; i++) {
                        x.push(data.statistics_Step.array_Step[i].day)
                        y.push(data.statistics_Step.array_Step[i].steps)
                    }
                }
                //夜间睡觉
                var AllTime = [], dataOther = [];
                var dataSleep = [], dataGoOut = [];
                var time1 = This.addDate(new Date(), 0);
                var time = new Date(time1 + ' 00:00');
                var addTime = 60 * 1000;
                var avgTimePoint_Bed = '00:00', avgTimePoint_GetUp = '00:00'
                for (let i = 0; i < 1440; i++) {
                    if (i === 0) {
                        AllTime.push('0AM');

                        time = new Date(+time + addTime);
                        dataOther.push([data.userID, '0AM', '09:59 ']);
                    } else if (i === 240) {
                        AllTime.push('4');
                        time = new Date(+time + addTime);
                        // dataOther.push(['4', data.userID]); 
                    }
                    else if (i === 240 * 2) {
                        AllTime.push('8');
                        time = new Date(+time + addTime);
                        // dataOther.push(['8', data.userID]); 
                    }
                    else if (i === 240 * 3) {
                        AllTime.push('12AM');
                        time = new Date(+time + addTime);
                        // dataOther.push(['12AM', data.userID]); 
                    }
                    else if (i === 240 * 4) {
                        AllTime.push('16');
                        time = new Date(+time + addTime);
                        // dataOther.push(['16', data.userID]); 
                    }
                    else if (i === 240 * 5) {
                        AllTime.push('20');
                        time = new Date(+time + addTime);
                        dataOther.push(['20', data.userID]);
                    }

                    else {
                        AllTime.push(time.Format("hh:mm"));
                        time = new Date(+time + addTime);
                        //  dataOther.push([time.Format("hh:mm"), data.userID]); 
                    }

                }
                for (let j = 0; j <= 600; j++) {
                    if (j === 0) {
                        AllTime.push('0AM ');
                        time = new Date(+time + addTime);
                        //  dataOther.push(['0AM ', data.userID]); 
                    }
                    else if (j === 240) {
                        AllTime.push('4 ');
                        time = new Date(+time + addTime);
                        //  dataOther.push(['4 ', data.userID]); 
                    }
                    else if (j === 240 * 2) {
                        AllTime.push('8 ');
                        time = new Date(+time + addTime);
                        //  dataOther.push(['8 ', data.userID]); 
                    }
                    else if (j === 600) {
                        AllTime.push('10AM ');
                        dataOther.push(['10AM ', data.userID]);
                    }
                    else {
                        AllTime.push(time.Format("hh:mm") + " ");
                        time = new Date(+time + addTime);
                        //  dataOther.push([time.Format("hh:mm") + " ", data.userID]); 
                    }

                }

                var time2 = new Date(time1 + ' 16:00');
                for (let i = 0; i < 1440 - 960; i++) {
                    if (i === 0) {
                        AllTime2.push('16:00');
                        time2 = new Date(+time2 + addTime);

                    } else if (i === 240) {
                        AllTime2.push('20:00');
                        time2 = new Date(+time2 + addTime);

                    }
                    else if (i === 240 * 2) {
                        AllTime2.push('00:00');
                        time2 = new Date(+time2 + addTime);
                    }
                    else {
                        AllTime2.push(time2.Format("hh:mm"));
                        time2 = new Date(+time2 + addTime);
                    }

                }
                for (let j = 0; j <= 720 + 240; j++) {
                    if (j === 0) {
                        AllTime2.push('0AM ');
                        time2 = new Date(+time2 + addTime);

                    }
                    else if (j === 240) {
                        AllTime2.push('4:00');
                        time2 = new Date(+time2 + addTime);
                    }
                    else if (j === 240 * 2) {
                        AllTime2.push('8:00');
                        time2 = new Date(+time2 + addTime);

                    }
                    else if (j === 720) {
                        AllTime2.push('12:00 ');
                        time2 = new Date(+time2 + addTime);
                    }
                    else if (j === 720 + 240) {
                        AllTime2.push('16:00PM');
                        time2 = new Date(+time2 + addTime);
                    }
                    //else if (j === 960) {
                    //    AllTime2.push('16PM ');
                    //    time2 = new Date(+time2 + addTime);
                    //}
                    else {
                        AllTime2.push(time2.Format("hh:mm"));
                        time2 = new Date(+time2 + addTime);
                        //  dataOther.push([time.Format("hh:mm") + " ", data.userID]); 
                    }

                }
                if (data.statistics_Sleep != null) {
                    avgTimePoint_Bed = new Date("2020-03-15 " + data.statistics_Sleep.avgTimePoint_Bed).Format('hh:mm')
                    avgTimePoint_GetUp = new Date("2020-03-15 " + data.statistics_Sleep.avgTimePoint_GetUp).Format('hh:mm')
                    This.bed = avgTimePoint_Bed
                    This.getup=avgTimePoint_GetUp
                    This.sleepinbed=parseInt(data.statistics_Sleep.avgBedDuration / 60)
                    This.sleepinbed1=data.statistics_Sleep.avgBedDuration % 60
                    This.NightUpTimes=data.statistics_Sleep.avgNightUpTimes
                } else {
                This.bed = ''
                    This.getup=''
                    This.sleepinbed=0
                    This.sleepinbed1=0
                    This.NightUpTimes=0
                }
                if (data.statistics_Sleep != null) {
                    for (let i = 0; i < data.statistics_Sleep.array_sleep.length; i++) {
                        if (data.statistics_Sleep.array_sleep[i].activeArray.length > 0) {
                            for (var j = 0; j < data.statistics_Sleep.array_sleep[i].activeArray.length; j++) {
                                var endtime1 = new Date(data.statistics_Sleep.array_sleep[i].activeArray[j].timePoint);
                                var endtimemin1 = endtime1.getMinutes();
                                endtime1.setMinutes(endtimemin1 + data.statistics_Sleep.array_sleep[i].activeArray[j].duration);
                                var diff = This.timeDifference(new Date(data.statistics_Sleep.array_sleep[i].activeArray[j].timePoint).Format('hh:mm'), '23:59');

                                if (diff > data.statistics_Sleep.array_sleep[i].activeArray[j].duration) {
                                    dataSleep.push([new Date(data.statistics_Sleep.array_sleep[i].day).Format('yyyy-MM-dd'),
                                    new Date(data.statistics_Sleep.array_sleep[i].activeArray[j].timePoint).Format('hh:mm'),
                                    new Date(endtime1).Format('hh:mm')
                                    ])
                                } else {
                                    dataSleep.push([new Date(data.statistics_Sleep.array_sleep[i].day).Format('yyyy-MM-dd'),
                                    new Date(data.statistics_Sleep.array_sleep[i].activeArray[j].timePoint).Format('hh:mm'),
                                    new Date(endtime1).Format('hh:mm')
                                    ])
                                }

                            }
                        }
                    }
                }
                var option1 = {
                    tooltip: {
                        formatter: function (datas) {
                            var res = '';
                            res = res + datas.data[1] + '<br/>';
                            res = res + datas.data[2] + '<br/>';
                            return res
                        }
                    },
                    grid: {
                        top: '21%',
                        left: '15%',
                        right: '15%',
                        bottom: '10%',
                        containLabel: true
                    },
                    title: {
                        text: ""
                    },
                    xAxis: {
                        name: '时间',
                        type: 'category',
                        //data: AllTime.slice(1200-240),
                        data: AllTime2,
                        splitLine: {
                            lineStyle: {
                                type: 'dashed'
                            }
                        },
                        axisLabel: {
                            interval: 239
                            //rotate: 30
                        }

                    },
                    yAxis: {
                        name: '日期',
                        type: 'category',
                        data: x,
                    },
                    series: [
                        {
                            name: '睡觉',
                            data: dataSleep,
                            color: '#764B97',
                            type: 'custom',
                            renderItem: function(params,api){
                            return This.renderItem(params, api)
                            //    console.log
                            },
                            itemStyle: {
                                normal: {
                                    opacity: 0.8
                                }
                            },
                            encode: {
                                x: [1, 2],
                                y: 0
                            },
                            markLine: {
                                silent: true,
                                data: [{
                                    xAxis: avgTimePoint_Bed,
                                    lineStyle: {
                                        color: '#ED7762'
                                    },
                                }
                                    , {
                                    xAxis: avgTimePoint_GetUp,
                                    lineStyle: {
                                        color: '#8CAD4E'
                                    },
                                }
                                ]
                            }
                        },
                    ]
                };
                let SleepChart = This.$echarts.init(document.getElementById('SleepChart'));
                SleepChart.clear();
                SleepChart.setOption(option1);
                window.addEventListener("resize", function () {
                    SleepChart.resize();
                });
                //外出
                if (data.statistics_GoOut != null) {
                    for (let i = 0; i < data.statistics_GoOut.array_GoOut.length; i++) {
                        if (data.statistics_GoOut.array_GoOut[i].activeArray.length > 0) {

                            for (let j = 0; j < data.statistics_GoOut.array_GoOut[i].activeArray.length; j++) {
                                let endtime1 = new Date(data.statistics_GoOut.array_GoOut[i].activeArray[j].timePoint);
                                let endtimemin1 = endtime1.getMinutes();
                                endtime1.setMinutes(endtimemin1 + data.statistics_GoOut.array_GoOut[i].activeArray[j].duration);

                                let diff = This.timeDifference(new Date(data.statistics_GoOut.array_GoOut[i].activeArray[j].timePoint).Format('hh:mm'), '23:59');

                                if (diff > data.statistics_GoOut.array_GoOut[i].activeArray[j].duration) {
                                    dataGoOut.push([new Date(data.statistics_GoOut.array_GoOut[i].day).Format('yyyy-MM-dd'),
                                    new Date(data.statistics_GoOut.array_GoOut[i].activeArray[j].timePoint).Format('hh:mm'),
                                    new Date(endtime1).Format('hh:mm')
                                    ])
                                } else {
                                    dataGoOut.push([new Date(data.statistics_GoOut.array_GoOut[i].day).Format('yyyy-MM-dd'),
                                    new Date(data.statistics_GoOut.array_GoOut[i].activeArray[j].timePoint).Format('hh:mm'),
                                    new Date(endtime1).Format('hh:mm ')
                                    ])
                                }
                            }
                        }
                    }
                }
                //次数统计
                var datacountsx = [], datacountsy1 = [], datacountsy2 = [], datacountsy3 = [], datacountsy4= [];
                if (data.statistics_GoOutTimes != null) {
                    for (let i = 0; i < data.statistics_GoOutTimes.array_goOutTimes.length; i++) {
                        //datacountsy1.push([data.statistics_GoOutTimes.array_goOutTimes[i].day, data.statistics_GoOutTimes.array_goOutTimes[i].times])
                        datacountsx.push(data.statistics_GoOutTimes.array_goOutTimes[i].day)
                        datacountsy1.push([data.statistics_GoOutTimes.array_goOutTimes[i].day, data.statistics_GoOutTimes.array_goOutTimes[i].times])
                    }
                    // This.wwaichucount=data.statistics_GoOutTimes.avg
                } else {
                    // This.wwaichucount=0
                }
                if (data.statistics_ToiletTimes != null) {
                    for (let i = 0; i < data.statistics_ToiletTimes.array_toiletTimes.length; i++) {
                        //datacountsy2.push([data.statistics_ToiletTimes.array_toiletTimes[i].day, data.statistics_ToiletTimes.array_toiletTimes[i].times])
                        datacountsy2.push([data.statistics_ToiletTimes.array_toiletTimes[i].day,data.statistics_ToiletTimes.array_toiletTimes[i].times])
                    }
                    This.wweishengjiancount = data.statistics_ToiletTimes.avg
                } else {
                    This.wweishengjiancount = 0
                }
                if (data.statistics_Visit != null) {
                    for (let i = 0; i < data.statistics_Visit.array_visit.length; i++) {
                        // datacountsy3.push([data.statistics_Visit.array_visit[i].day, data.statistics_Visit.array_visit[i].times])
                        datacountsy3.push([data.statistics_Visit.array_visit[i].day, data.statistics_Visit.array_visit[i].visit])
                    }
                    This.wfangwencount = data.statistics_Visit.avg
                } else {
                    This.wfangwencount = 0
                }
                if (data.statistics_NightBedLeaving != null) {
                    for (let i = 0; i < data.statistics_NightBedLeaving.array_NightBedLeaving.length; i++) {
                        datacountsy4.push([data.statistics_NightBedLeaving.array_NightBedLeaving[i].day, data.statistics_NightBedLeaving.array_NightBedLeaving[i].count])
                    }
                    This.yjlccount = data.statistics_NightBedLeaving.avg
                } else {
                    This.yjlccount = 0
                }
                var countoption2 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: [ '卫生间次数', '夜间离床次数']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: datacountsx
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLine:{     //坐标轴
                                "show":true
                            },
                            axisTick: {		//x轴刻度线
                                show:true
                            },
                        }
                    ],
                    series: [
                        {
                            name: '卫生间次数',
                            type: 'line',

                            data: datacountsy2
                        },
                        {
                            name: '夜间离床次数',
                            type: 'line',
                            data: datacountsy4,
                            color:'#4fc8db'

                        }
                    ]
                };
                let countsChart1 = This.$echarts.init(document.getElementById('countsChart'));
                countsChart1.clear();
                countsChart1.setOption(countoption2)
                window.addEventListener("resize", function () {
                    countsChart1.resize();
                });
                //睡眠评分
                var sleepx = [], sleepy = []
                if (data && data.statistics_SleepScore != null) {
                    for (let i = 0; i < data.statistics_SleepScore.array_sleepScore.length; i++) {
                        sleepx.push(data.statistics_SleepScore.array_sleepScore[i].day)
                        sleepy.push(data.statistics_SleepScore.array_sleepScore[i].score)
                    }
                    This.weeksleepavg = data.statistics_SleepScore.avg
                } else {
                    This.weeksleepavg = 0
                }
                let option3 = {
            
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        //top: '50%',
                        left: '20',
                        //right: '20',
                        bottom: '40',
                        containLabel: true
                    },

                    //legend: {
                    //    //data: ['休息', '外出', '外出返回', '午休', '看电视', '聊天', '睡觉', '起夜', '其他']
                    //    //data: ['休息', '外出']
                    //},

                    xAxis: {
                        name: '日期',
                        type: 'category',
                        data: sleepx,
                        splitLine: {
                            lineStyle: {
                                type: 'dashed'
                            }
                        },
                        axisLabel: {
                            show: true,
                            interval: 0,
                            rotate: 40,
                            textStyle: {
                                color: '#333'
                            }
                        },

                    },
                    yAxis: {
                        type: 'value',
                        name: '分数',
                        axisLine:{     //坐标轴
                            "show":true
                        },
                       axisTick: {		//x轴刻度线
                            show:true
                        },
                    },

                    series: [
                        {
                            data: sleepy,
                            color: '#6B8FD4',
                            type: 'bar',
                            renderItem:  function(params,api){
                                return This.renderItem(params, api)
                            },
                            itemStyle: {
                                normal: {
                                    opacity: 0.8
                                }
                            },
                            encode: {
                                x: [1, 2],
                                y: 0
                            }
                        

                        }

                    ]
                };
                let ninghtsleepChart = This.$echarts.init(document.getElementById('ninghtsleepChart'));
                ninghtsleepChart.clear();
                ninghtsleepChart.setOption(option3);
                window.addEventListener("resize", function () {
                    ninghtsleepChart.resize();
                });
                //夜间心率
                let datax = [], datay = []
                if(data.sleep_Heartrate){
                    for (let i = 0; i < data.sleep_Heartrate.array_sleep_heartRate.length; i++) {
                        datax.push(data.sleep_Heartrate.array_sleep_heartRate[i].day)
                        datay.push(data.sleep_Heartrate.array_sleep_heartRate[i].sleepHeartRate)
                    }
                    This.syxinlvWeekyavg1 = data.sleep_Heartrate.avg
                } else{
                     This.syxinlvWeekyavg1 = ''
                }
                let option4 = {
                    grid: {
                        left: '3%',
                        right: '8%',
                        bottom: '8%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    xAxis: {
                        name: '日期',
                        type: 'category',
                        data: datax,
                        axisLabel: {
                            //  interval: 0,
                            rotate: 40
                        },
                    },
                    yAxis: {
                        name: '次/分钟',
                        type: 'value',
                        axisLine:{     //坐标轴
                            "show":true
                        },
                        axisTick: {		//x轴刻度线
                            show:true
                        },
                    },
                    series: [{
                        data: datay,
                        type: 'line',
                        itemStyle: {
                            normal:
                            {
                                lineStyle:
                                {
                                    color: '#6b4fdb'
                                }
                            }
                        },
                    }]
                };
                let syxlweekChart = This.$echarts.init(document.getElementById('syxlweekChart'));
                syxlweekChart.clear();
                syxlweekChart.setOption(option4);
                
                window.addEventListener("resize", function () {
                    syxlweekChart.resize();
                });
                //夜间呼吸率
                let datax2 = [], datay2 = []
                if(data.sleep_Breath){
                    for (let i = 0; i < data.sleep_Breath.array_sleep_breath.length; i++) {
                        datax2.push(data.sleep_Breath.array_sleep_breath[i].day)
                        datay2.push(data.sleep_Breath.array_sleep_breath[i].sleepBreath)
                    }
                    This.syhuxilvWeekyavg = data.sleep_Breath.avg
                } else {
                    This.syhuxilvWeekyavg = ''
                }
                
                let option5 = {
                    grid: {
                        left: '3%',
                        right: '8%',
                        bottom: '8%',
                        containLabel: true
                    },

                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    xAxis: {
                        name: '日期',
                        type: 'category',

                        data: datax2,
                        axisLabel: {
                            //  interval: 0,
                            rotate: 40
                        },
                    },
                    yAxis: {
                        name: '次/分钟',
                        type: 'value',
                           axisLine:{     //坐标轴
                            "show":true
                        },
                       axisTick: {		//x轴刻度线
                            show:true
                        },
                    },
                    series: [{
                        data: datay2,
                        type: 'line',
                        itemStyle: {
                            normal:
                            {
                                lineStyle:
                                {
                                    color: '#4fc8db'
                                }
                            }
                        },
                    }]
                };
                let syhxlweekChart = This.$echarts.init(document.getElementById('syhxlweekChart'));
                syhxlweekChart.clear();
                syhxlweekChart.setOption(option5);
              
                window.addEventListener("resize", function () {
                    syhxlweekChart.resize();
                });
        })
        },
        addDate(date, days) {
            var d = new Date(date);
            d.setDate(d.getDate() + days);
            var month = d.getMonth() + 1;
            var day = d.getDate();
            if (month < 10) {
                month = "0" + month;
            }
            if (day < 10) {
                day = "0" + day;
            }
            var val = d.getFullYear() + "-" + month + "-" + day;
            return val;
        },
        timeDifference(startTime, endTime) {
            var start1 = startTime.split(":");
            var startAll = parseInt(start1[0] * 60) + parseInt(start1[1]);
            var end1 = endTime.split(":");
            var endAll = parseInt(end1[0] * 60) + parseInt(end1[1]);
            return (endAll - startAll);
        },
        renderItem(params, api) {
            var categoryIndex = api.value(0);
            var start = api.coord([api.value(1), categoryIndex]);
            var end = api.coord([api.value(2), categoryIndex]);
            var height = api.size([0, 1])[1] * 0.6;

            var rectShape = this.$echarts.graphic.clipRectByRect({
                x: start[0],
                //y: start[1] - height / 2,
                y: start[1] - height / 2,
                width: end[0] - start[0],
                height: height
                //height:13
            }, {
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height
            });
            window.addEventListener("resize", function () {
                rectShape.resize();
            });
            return rectShape && {
                type: 'rect',
                shape: rectShape,
                style: api.style()
            };
        },
        logout() {
            this.$router.push("/");
        }
    }
}
</script>

  <style scoped>
  .date{
    font-size: 1.3rem;
    font-weight: bold;
    color: rgb(142,110,172);
    line-height: 40px;margin-left: 12px;
  }
  h2{
    margin: 0;
    padding: 0;
    font-size: 1.4rem;
    font-weight: bold;
    color: #000000;
    margin-bottom: 15pt;
  }
  .highlight {
    color: #8550FF;
    font-weight: 100;
    font-size: 1.3rem;
}

.card{
    background-size: cover;
    background-color: #FAFAFA;
    border-radius: 14px;
    padding: 2rem;
    box-shadow: 0 14px 29px 0 rgb(0 0 0 / 20%), inset 0 0.5px 0.7px 0 rgb(0 0 0 / 20%);
    display: flex;
    flex-direction: column;
    height: min-content;
    position: relative;
    width: 41rem;
    height: auto;
    margin-bottom: 1rem;
}
.card2{
    background-size: cover;
    background-color: #FAFAFA;
    border-radius: 14px;
    padding: 2rem;
    box-shadow: 0 14px 29px 0 rgb(0 0 0 / 20%), inset 0 0.5px 0.7px 0 rgb(0 0 0 / 20%);
    display: flex;
    flex-direction: column;
    height: min-content;
    position: relative;
    width: 41rem;
    height: auto;
    margin-bottom: 1rem;
}
.chart{
    height: 23rem;
    width: 41rem;
}
.chart2{
    height: 18rem;
    width: 41rem;
}
h2{
    text-align: left;
}
.stat-legend{
    text-align: left;
}
#sleep-time {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 10pt;
}
.stat{
    text-align: left;
}
.stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: left;
}
.stat > h4 {
    margin: 0;
    padding: 0 10pt;
    font-size: 1rem;
    font-weight: 100;
    color: #979797;
    white-space: nowrap;
}
.stat > h3 {
    margin: 0;
    padding: 0;
    font-size: 1rem;
}
  </style>